<template>
  <div class="zhxx">
    <div class="zhxx_zhxx">
      <p>账户信息</p>
      <hr />
      <div class="zhxx_zhxxp">
        <p>
          手机号：<span>{{ datas[0].user_phone }}</span>
        </p>
        <p
          @click="hideName1"
          style="text-decoration: underline; cursor: pointer"
        >
          修改密码
        </p>

        <div v-show="flag3">
          <div>
            <p>旧密码</p>
            <el-input
              placeholder="请输入旧密码"
              v-model="oldPwd"
              show-password
            ></el-input>
          </div>
          <div>
            <p>新密码</p>
            <el-input
              placeholder="请输入新密码"
              v-model="newPwd"
              show-password
            ></el-input>
          </div>
          <div>
            <p>确认新密码</p>
            <el-input
              placeholder="确认新密码"
              v-model="confirmPwd"
              show-password
            ></el-input>
          </div>
          <div class="xmmbutton">
            <button @click="hideName1">取消修改</button>
            <button @click="changePassword">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- one -->
    <div class="personalgrxxone" v-show="flag1">
      <p>
        个人信息
        <span>（完整填写信息，将即可获50点积分作为奖励）</span>
      </p>
      <hr />
      <div>
        <p>姓名:{{ datas[0].user_name }}</p>
        <p>性别:{{ datas[0].user_sex }}</p>
        <p>生日:{{ datas[0].user_birth }}</p>
        <p>身高:{{ datas[0].user_height }}</p>
        <p>体重:{{ datas[0].user_weight }}</p>
      </div>
      <div class="grxxonebutton">
        <img src="../assets/jiantouright.png" alt="" />
        <button @click="hideName3()">修改</button>
      </div>
    </div>
    <!-- two -->
    <div class="personalgrxxtwo" v-show="flag2">
      <p>
        个人信息
        <span>（完整填写信息，将即可获50点积分作为奖励）</span>
      </p>
      <hr />
      <div class="grxxtwoxm">
        <p>姓名</p>
        <input type="text" v-model="datas[0].user_name" />
      </div>
      <div class="grxxtwoxb">
        <p>性别</p>
        <el-radio-group v-model="datas[0].user_sex">
          <el-radio-button label="男"></el-radio-button>
          <el-radio-button label="女"></el-radio-button>
        </el-radio-group>
      </div>

      <div class="grxxtwosr">
        <p>生日</p>
        <el-date-picker
          v-model="datas[0].user_birth"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="grxxtwocs">
        <p>身高：<input type="text" v-model="datas[0].user_height" /></p>
        <p>体重：<input type="text" v-model="datas[0].user_weight" /></p>
      </div>
      <div class="grxxtwobutton">
        <button @click="hideName2">取消修改</button>
        <button @click="hideName4()">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalZhxx",
  data() {
    return {
      flag1: true,
      flag2: false,
      flag3: false,
      //旧密码
      oldPwd: "",
      newPwd: "",
      confirmPwd: "",
      receiveSuccess: {},

      personalHeight: "",
      personalWeight: "",
      temps: [],
      datas: [],
      //   two
      radio1: "上海",
      //生日
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value2: "",
    };
  },
  methods: {
    hideName1() {
      this.flag3 = !this.flag3;
    },
    hideName2() {
      this.flag1 = !this.flag1;
      this.flag2 = !this.flag2;
    },
    hideName3() {
      this.flag1 = !this.flag1;
      this.flag2 = !this.flag2;
    },
    hideName4() {
      this.flag1 = !this.flag1;
      this.flag2 = !this.flag2;

      this.$axios
        .post("/api/users/changeInfo", {
          user_id: localStorage.getItem("user_id"),
          user_name: this.datas[0].user_name,
          user_sex: this.datas[0].user_sex,
          user_birth: this.datas[0].user_birth,
          user_height: this.datas[0].user_height,
          user_weight: this.datas[0].user_weight,
        })
        .then((res) => {
          // this.$router.go(0)
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    //修改密码
    changePassword() {
      if (localStorage.getItem("token")) {
        if (
          (this.oldPwd != null) &
          (this.newPwd != null) &
          (this.confirmPwd != null)
        ) {
          let detPwd = /^(\w){6,20}$/;
          if (detPwd.test(this.newPwd)) {
            if (this.oldPwd != this.newPwd) {
              if (this.confirmPwd == this.newPwd) {
                this.$axios
                  .post("/api/users/changePwd", {
                    oldPwd: this.oldPwd,
                    newPwd: this.newPwd,
                    userid: localStorage.getItem("user_id"),
                  })
                  .then((res) => {
                    this.receiveSuccess = res.data.code;
                    if (this.receiveSuccess == 200) {
                      this.$message({
                        showClose: true,
                        message: "修改密码成功,请重新登录",
                        type: "success",
                      });
                    } else {
                      this.$alert("旧密码输入错误", {
                        confirmButtonText: "确定",
                      });
                      this.oldPwd = null;
                      return Promise.reject();
                    }
                  })
                  .then(() => {
                    localStorage.removeItem("token");
                    this.$router.push("/");
                    this.$router.go(0);
                  });
              } else {
                this.$alert("两次输入新密码不同，请重新输入", {
                  confirmButtonText: "确定",
                });
                this.newPwd = null;
                this.confirmPwd = null;
              }
            } else {
              alert("新密码与旧密码一致，无需修改密码");
            }
          } else {
            this.$alert(
              "密码格式错误，请输入任意6-20位密码（仅限数字与字母）",
              {
                confirmButtonText: "确定",
              }
            );
            this.newPwd = null;
            this.confirmPwd = null;
          }
        } else {
          this.$alert("密码不能为空", {
            confirmButtonText: "确定",
          });
        }
      } else {
        this.$alert("请先登录", {
          confirmButtonText: "确定",
        });
      }
    },
  },
  created() {
    this.$axios
      .get("/api/users/getUserInfo", {
        params: {
          user_id: localStorage.getItem("user_id"),
        },
      })
      .then((res) => {
        this.datas = res.data.results;
      })
      .catch((err) => {
        console.log("err", err);
      });
  },
};
</script>

<style>
.zhxx {
  width: 87%;
  margin-left: 20px;
}
.zhxx p {
  margin: 15px 0px;
  font-size: 13px;
}
.zhxx_zhxx {
  width: 100%;
  padding: 0 20px;
  border: 1px solid #000;
}
.zhxx_zhxx > p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.zhxx .zhxx_zhxxp {
  margin: 22px 0px;
}
.zhxx_zhxxp > p:nth-child(2) span,
.zhxx_zhxxp > p:nth-child(3) {
  text-decoration: underline;
}
/* one */
.personalgrxxone {
  width: 100%;
  padding: 0 20px;
  border: 1px solid #000;
}
.personalgrxxone > p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.personalgrxxone {
  margin-top: 50px;
}
.personalgrxxone > p:nth-child(1) > span {
  font-size: 15px;
  font-weight: normal;
  color: #999;
  margin-left: 2%;
}
.grxxonebutton {
  position: relative;
  width: 100%;
}
.personalgrxxone .grxxonebutton button {
  width: 30%;
  height: 40px;
  padding-right: 6%;
  margin: 20px;
  background-color: #000;
  color: #fff;
  font-size: 18px;
}
.grxxonebutton img {
  position: absolute;
  top: 44%;
  left: 19%;
  width: 4%;
  height: 13px;
}
/* two */
.personalgrxxtwo {
  width: 100%;
  padding: 0 20px;
  border: 1px solid #000;
}
.personalgrxxtwo > p:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: 600;
}
.personalgrxxtwo {
  margin-top: 50px;
}
.personalgrxxtwo > p:nth-child(1) > span {
  font-size: 15px;
  font-weight: normal;
  color: #999;
  margin-left: 2%;
}
.grxxtwoxb,
.grxxtwocs,
.grxxtwosr,
.grxxtwobutton {
  margin-top: 30px;
}

.grxxtwoxm > input {
  width: 30%;
  height: 37px;
  border: 1px solid #dcdfe6;
}
/* 男女 */
.zhxx .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #000;
  background-color: #fff;
  border-color: #000;
  -webkit-box-shadow: -1px 0 0 0 #000;
  box-shadow: -1px 0 0 0 #000;
}
.zhxx .el-radio-button__inner {
  white-space: nowrap;
  width: 170px;
}
/* 生日 */
.zhxx .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
.zhxx .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  line-height: 40px;
}
/* 城市 */
.zhxx .el-cascader .el-input .el-input__inner {
  text-overflow: ellipsis;
}
.zhxx .el-cascader .el-input .el-input__inner:focus,
.zhxx .el-cascader .el-input.is-focus .el-input__inner {
  border-color: #000;
}
/* 按钮 */
.grxxtwobutton > button:nth-child(1),
.xmmbutton > button:nth-child(1) {
  width: 30%;
  height: 50px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  font-size: 18px;
}
.grxxtwobutton > button:nth-child(2),
.xmmbutton > button:nth-child(2) {
  width: 30%;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  margin-bottom: 30px;
  font-size: 18px;
  margin-left: 4%;
}
.xmmbutton {
  margin-top: 30px;
}
.zhxx .el-input__prefix i {
  position: relative;
  top: 2%;
  right: 2%;
}
.zhxx .el-input__suffix-inner i {
  position: relative;
  top: 5%;
  left: -215px;
}
.zhxx_zhxxp .el-input__inner {
  width: 40%;
}
.zhxx .el-input__inner:hover,
.zhxx.el-input__inner:focus {
  border: 1px solid #000;
}
.zhxx .el-icon-view:before {
  content: "\e6ce";
  position: absolute;
  left: -350px;
}
</style>